﻿
@{
   
    Layout = null;
}

    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />

    <form class="layui-form" action="">
        <input type="text" id="id" hidden="hidden"  value="@ViewBag.Id">
        <div class="layui-form-item">
            <label class="layui-form-label">工作站编号</label>
            <div class="layui-input-block">
                <input type="text" id="workstationCode" name="workstationCode" lay-verify="required" placeholder="请输入工作站编号" autocomplete="off" class="layui-input" style="width:300px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">工作站名称</label>
            <div class="layui-input-block">
                <input type="text" id="workstationName" name="workstationName" lay-verify="required" placeholder="请输入工作站名称" autocomplete="off" class="layui-input" style="width:300px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">工作站地点</label>
            <div class="layui-input-block">
                <input type="text" id="workstationPlace" name="workstationPlace" lay-verify="required" placeholder="请输入工作站地点" autocomplete="off" class="layui-input" style="width:300px">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">所在区间</label>
                <div class="layui-input-inline">
                    <select id="workshopName" name="workshopName" placeholder="请选择所在区间">
                        <option value="">请选择所在区间</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">所属工序</label>
                <div class="layui-input-inline">
                    <select id="processBelongs" name="processBelongs" placeholder="请选择所属工序">
                        <option value="">请选择所属工序</option>

                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                <input type="radio" id="stateYes" name="state" value="true" title="是" checked>
                <input type="radio" id="stateNo" name="state" value="false" title="否">

            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="update">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary" onclick="closeWorkStation()">取消</button>
            </div>
        </div>
    </form>

    <script src="~/libs/jquery/jquery.js"></script>
    <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
    <script>

        //关闭弹框
        function closeWorkStation() {
            var index = parent.layer.getFrameIndex(window.name);//先得到当前的索引
            parent.layer.close(index);//再执行关闭
        }
        //获取工作站编号
        var number = "WS" + Math.floor(1000 + Math.random() * 9000);
        $("#workstationCode").val(number)

        layui.use(['form', 'laydate', 'util'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var util = layui.util;
            // 提交事件
            form.on('submit(update)', function (data) {
                var field = data.field;
                // 获取表单字段值
                field = {
                    id: $("#id").val(),
                    workstationCode: $("#workstationCode").val(),
                    workstationName: $("#workstationName").val(),
                    workstationPlace: $("#workstationPlace").val(),
                    workshopName: $("#workshopName").val(),
                    processBelongs: $("#processBelongs").val(),
                    state: $("#stateYes").prop("checked")?true:false,
                },
                $.ajax({
                    type: 'post',
                    url: '/Workstation/UpdateWorkstation',
                    dataType: 'json',
                    data: field,
                    success: function (res) {
                        if (res > 0) {
                            layer.msg('修改成功')
                            closeWorkStation()
                            return false;
                        }
                        if (res == -1) {
                            layer.msg('工作站编号已存在')
                            return false;
                        }
                        if (res == -2) {
                            layer.msg('工作站名称已存在')
                            return false;
                        }

                    }
                })
                return false; // 阻止默认 form 跳转
            })




            $(document).ready(function () {
                // 使用 AJAX 获取所在车间数据  
                $.ajax({
                    url: '/Workstation/GetDictItems?dictTypeId=' + 20, // 替换为你的 API 路径  
                    type: 'GET',
                    dataType: 'json',
                    async: false,
                    success: function (res) {
                        // 清空现有选项  
                        $('#workshopName').empty();
                        $('#workshopName').append('<option value="0">请选择所在车间</option>');

                        // 遍历返回的数据  
                        $.each(res, function (index, vendor) {
                            $('#workshopName').append(
                                '<option value="' + vendor.dictItemName + '">' + vendor.dictItemName + '</option>'
                            );
                        });
                        // 重新渲染 layui 组件
                        layui.form.render('select');
                    },
                    error: function (xhr, status, error) {
                        console.error('获取所在车间失败:', error);
                    }
                });
                // 使用 AJAX 获取所属工序数据  
                $.ajax({
                    url: '/Workstation/GetDictItems?dictTypeId=' + 21, // 替换为你的 API 路径  
                    type: 'GET',
                    dataType: 'json',
                    async: false,
                    success: function (res) {
                        // 清空现有选项  
                        $('#processBelongs').empty();
                        $('#processBelongs').append('<option value="0">请选择所属工序</option>');

                        // 遍历返回的数据  
                        $.each(res, function (index, vendor) {
                            $('#processBelongs').append(
                                '<option value="' + vendor.dictItemName + '">' + vendor.dictItemName + '</option>'
                            );
                        });
                        // 重新渲染 layui 组件
                        layui.form.render('select');
                    },
                    error: function (xhr, status, error) {
                        console.error('获取所属工序失败:', error);
                    }
                });

                // 监听下拉框变化  
                $('#processBelongs').change(function () {
                    var selectedValue = $(this).val();
                    console.log("选择的所属工序ID:", selectedValue);
                    // 根据选择的所属工序进行其他操作
                });

                // 监听下拉框变化  
                $('#workshopName').change(function () {
                    var selectedValue = $(this).val();
                    console.log("选择的所在车间ID:", selectedValue);
                    // 根据选择的所在车间进行其他操作
                });

                getWorkstationId()
            });


               //反填
            function getWorkstationId() {
       // 页面加载时获取地址栏中的 id 参数
       var id = @ViewBag.id;
       //根据ID值获取数据
       $.ajax({
           type: 'get',
           url: '/Workstation/GetWorkstationById',// 替换成实际的后端接口地址
           data: { id: id },// 发送表单字段数据
           dataType: 'json',
           async: false,
           success: function (res) {
               $('#id').val(res.id);
               $("#workstationCode").val(res.workstationCode);
               $("#workstationName").val(res.workstationName);
               $("#workstationPlace").val(res.workstationPlace);
               $("#workshopName").val(res.workshopName);
               $("#processBelongs").val(res.processBelongs);
               if (res.state) {
                   $("#stateYes").prop("checked", true);
               }
               else {
                   $("#stateNo").prop("checked", true);
               }
               
               // 重新渲染 layui 组件
               layui.form.render('radio');
               // 重新渲染 layui 组件
               layui.form.render('select');// 渲染 select 类型的表单元素

           }
       })
   }
        });
    </script>




